<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/reset.css">
    <title>Document</title>
    <style>
       ul{
           width:90%;
           margin-left:6.7%;
           padding-top:10px;
       }
       .oli{
           margin-top:20px;
           height: 157px;
           width:100%;
           border-bottom:1px solid #eeeeee;
       }
       .Bg{
           width:33.5%;
           height: 127px;
           background-size: 100% 100%;
           float: left;
       }
       .oli:nth-of-type(5){
           border-bottom: none;
       }
       @media screen and (max-width:650px){
           .oli .right .ostrong{
           font-size: 20px;
           color:#999999;
        }
            .oli .right .oA{
                color:#333333;
                font-size: 11px;
            }
       } 
        .oA{
            color:#333333;
            font-size: 14px;
        }
        .ostrong{
            font-size: 26px;
            color:#999999;
            float: right;
        }
       .right{
            width:64.5%;
            margin-left:2%;
            float: left;
       }
       
        .op{
            font-size: 11px;
            margin-top:30px;
            color:#c4c4c4;
       }
       .page{
           width:36px;
           height:36px;
           background:#999999;
           margin:0px auto;
           text-align: center;
           color:#ffffff;
           font:26px/36px 'simhei';
       }
    </style>
</head>
<body> 
    <ul>
    </ul>
    <div class="page">1</div>
</body>
<script src="js/receptionjson.js"></script>
<script>
    var oUl=document.getElementsByTagName("ul")[0];
    for(var i=0;i<text.length;i++){
        var oLi=document.createElement("li");
        oLi.setAttribute('class','clear');
        oLi.className='oli';
        oUl.appendChild(oLi);
        var oBg=document.createElement("div");
        oBg.style.background='url("'+text[i].oimg+'")';
        oBg.style.backgroundSize='100% 100%';
        oBg.className='Bg';
        oLi.appendChild(oBg);
        console.log(1);
        var oinner=document.createElement('div');
        oinner.className='right';
        oLi.appendChild(oinner);
        var oA=document.createElement('a');
        oA.className='oA';
        oA.href=text[i].ohref;
        oA.innerHTML=text[i].title;
        oinner.appendChild(oA);
        var ostrong=document.createElement('strong');
        ostrong.className='ostrong';
        ostrong.innerHTML=text[i].date;
        oinner.appendChild(ostrong);
        var op=document.createElement('p');
        op.className='op';
        op.innerHTML=text[i].synopsis;
        oinner.appendChild(op);
    }
    var oA=document.getElementsByTagName("a");
    var oMain=window.parent.document.getElementById("main");
    var oComment=window.parent.document.getElementById("comment");
    console.log(oA.length);
    for(var i=0;i<oA.length;i++){
        oA[i].onclick=function(){
           window.parent.document.getElementById("main_content").style.height='900px';
            oComment.style.display='block';
        }
    }
</script>
</html>